'use client'
import React, { useState } from 'react'
import { Button } from '@arco-design/web-react'
import { IconSend } from '@arco-design/web-react/icon'
import UploadButton from '../base/upload-button'

type ChatInputAreaProps = {
  onSend: (message: string) => void
  onFileUpload?: (file: File) => void
}

const ChatInputArea: React.FC<ChatInputAreaProps> = ({
  onSend,
  onFileUpload,
}) => {
  const [message, setMessage] = useState('')

  const handleSend = () => {
    if (message.trim()) {
      onSend(message)
      setMessage('')
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

  return (
    <div className="flex items-center p-2 border-t border-gray-200 bg-white">
      <div className="flex-1 mr-2">
        <textarea
          className="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="输入消息..."
          value={message}
          onChange={e => setMessage(e.target.value)}
          onKeyDown={handleKeyDown}
          rows={1}
        />
      </div>
      <div className="flex items-center space-x-2">
        <UploadButton
          onFileUpload={onFileUpload}
          size="small"
          className="mr-1"
        />
        <Button
          type="primary"
          icon={<IconSend />}
          onClick={handleSend}
          disabled={!message.trim()}
        >
                    发送
        </Button>
      </div>
    </div>
  )
}

export default ChatInputArea
